<template>
  <div id="app">
    <div class="tit">
      <span class="iconfont icon-fanhui" @click="back"></span>
      <p class="h1">新增收货地址</p>
    </div>
    <div class="msg">
      <mt-field label="用户名" placeholder="您的姓名" :state="nameStatus" v-model="username" @blur.native.capture="changeName"></mt-field>
      <mt-field label="手机号" placeholder="您的手机号" type="tel" :state="phoneStatus" v-model="phone" @blur.native.capture="change"></mt-field>
      <Area/>
    </div>
    <a class="add" href="./address" @click="fix">确定</a>
  </div>
</template>
<script>

    import Area from './Area'
    export default {
        name:'App',
        components:{
            Area
        },
        data(){
            return{
                value:[],
                def:[' 默认地址'],
                username:'',
                nameStatus:'',
                phone:'',
                phoneStatus:'',
            }
        },
        mounted(){
            // this.axios({
            //     method: 'get',
            //     url: 'http://115.28.137.176:8088/testBase64',
            //     headers:{
            //         "token":"1111"
            //     },
            //     params: {
            //         "base64":"1231231231231fdfdf"
            //     }
            // }).then((res)=>{
            //     console.log(res)
            // })
            this.axios({
                method:'post',
                url:'http://115.28.137.176:8088/testBase64',
                headers:{
                  "token":"1111"
                },
                data:{
                    "base64":"1231231231231fdfdf"
                }
            }).then((res)=>{
                console.log(res);
            }).catch(()=>{
                console.log('网络错误')
            });
        },
        methods:{
            changeName(){
              let reg=/[\u4e00-\u9fa5]/;
                if (!reg.test(this.username)||this.username=='') {
                    this.nameStatus="error";
                }else {
                    this.nameStatus="success";
                }
            },
            change(){
                let reg=/^0{0,1}(13[0-9]|15[7-9]|153|156|18[7-9])[0-9]{8}$/;
                if (!reg.test(this.phone)||this.phone=='') {
                    this.phoneStatus="error";
                }else {
                    this.phoneStatus="success";
                }
            },
            back(){
                this.$router.go(-1)
            },
            fix(){
                if (this.username==''||this.phone=='') {
                    console.log(1)
                }
            }
        }

    }
</script>
<style lang="less">
  @baseFontSize:20px;
  @baseSize:20;
  html{
    font-size: @baseFontSize;
  }
  .px2rem(@name,@px){
      @{name}:@px / 2 / @baseSize * 1rem;
  }

  *{
    margin: 0;
    padding: 0;
    text-decoration: none;
    list-style: none;
  }
#app {
  .tit{
    position: relative;
    background: orange;
    span{
      position: absolute;
      left: 15px;
      top: 10px;
    }
    .h1{
      text-align: center;
      .px2rem(line-height,80);
      .px2rem(height,80);
      border-bottom: 1px solid gray;
      color: white;
    }
  }
  .add{
    position: absolute;
    left: 0;
    bottom: 0;
    .px2rem(width,750);
    .px2rem(height,80);
    background: orangered;
    color: white;
    outline: none;
    border: none;
    text-align: center;
    .px2rem(font-size,30);
    .px2rem(line-height,80);
  }
}


</style>
